<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .one,
        .two,
        .three {
            position: relative;
            display: block;
            width: 600px;
            height: 300px;
            background-color: slateblue;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="one">
        <h1>One</h1>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Asperiores ad sapiente accusamus odio iusto quae maxime et repellat ut illo commodi necessitatibus, nisi harum laborum molestias est itaque, consequuntur vitae nihil nemo. Dolorem voluptatem
            eos odio non, ipsa praesentium culpa, minus eius distinctio iusto dolores! Sed odit sunt eveniet omnis cupiditate, itaque eligendi, similique numquam impedit blanditiis necessitatibus totam ea modi autem. Velit necessitatibus laborum cum.
            Explicabo ipsam accusantium aperiam asperiores. Doloremque dignissimos molestias, dolorum error aliquid in recusandae aliquam repellendus aut suscipit sequi. Earum ut libero dolores, repellat ratione consectetur omnis, fuga maiores est in,
            laborum praesentium quo neque!</p>
    </div>
    <div class="two">
        <h1>Two</h1>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, dolore unde soluta sint ea, assumenda, voluptatum ipsum eum veritatis omnis quaerat. Quisquam consequuntur quibusdam similique molestiae. Nam qui explicabo delectus architecto voluptate
            saepe dolores vero reiciendis porro earum itaque inventore quidem sed maxime vitae iure sint, soluta at ea, ratione tempore blanditiis tenetur odit? Doloremque voluptatem explicabo eum libero ducimus molestiae iusto quos optio blanditiis!
            Esse cumque officiis nemo itaque non nobis recusandae cum! Quos molestias facilis omnis at aliquid dolore aspernatur, porro similique atque perferendis ratione ipsam dolorem commodi, officia odio repellendus cumque maxime aut ex, illum voluptates!
            Dolores!
        </p>
    </div>
    <div class="three">
        <h1>Three</h1>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem veniam dolor expedita repudiandae, optio consequatur distinctio sapiente voluptas temporibus tempore magnam sit aliquam maiores iure sed exercitationem voluptates dolores sunt blanditiis
            autem, quo iste iusto hic. Officiis similique officia excepturi quos, voluptatem possimus laborum id doloremque nesciunt impedit dicta aliquam nam velit delectus quia? Saepe numquam iusto laboriosam aliquam voluptatum ipsa fuga, eos, iste
            cupiditate itaque ullam! Vero, tempore tenetur placeat deserunt veniam repellendus. Blanditiis nobis, modi officia obcaecati vero velit aliquam ex dolore veniam dicta libero quisquam commodi numquam vitae cum minima expedita, necessitatibus
            et. Repudiandae sed a mollitia.
        </p>

    </div>
    <!-- <button>x</button> -->
    <script>
        // 有一个消息列表。 使用 JavaScript 在每条消息的右上角添加一个关闭按钮。点击这个关闭按钮，对应的消息盒子隐藏。
        var divs = document.querySelectorAll('div');
        console.log(divs);
        for (var i = 0; i < divs.length; i++) {
            var btn = document.createElement('button');
            btn.style.width = '' + 20 + 'px';
            btn.style.height = '' + 20 + 'px';
            btn.innerHTML = 'x';
            btn.style.position = 'absolute';
            btn.style.top = '0';
            btn.style.right = '0';
            btn.style.backgroundColor = 'slateblue';
            btn.style.outline = 'none'
            divs[i].prepend(btn);
            // console.log(btn);
            btn.onclick = function() {
                // console.log(123);
                this.parentNode.style.display = 'none';
            }
        }
    </script>
</body>

</html>